<template>
	<el-row>
		<el-form ref="ruleFlowForm" :inline="true" :model="ruleFlow" class="demo-form-inline">
			<el-form-item label="规则流" prop="ruleFlowCode">
				<el-input v-model="ruleFlow.ruleFlowCode" placeholder="请输入规则流标识"></el-input>
			</el-form-item>
			<el-form-item label="规则名" prop="ruleFlowName">
				<el-input v-model="ruleFlow.ruleFlowName" placeholder="请输入规则名"></el-input>
			</el-form-item>
			<el-form-item label="组织" prop="groupName">
				<el-input v-model="ruleFlow.groupName" placeholder="请输入规则名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryFlow">查询</el-button>
				<el-button type="primary" @click="addFlow">新增</el-button>
			</el-form-item>
		</el-form>
	</el-row>
	<el-table :data="tableData" ref="ruleFlowTable" style="width: 100%;" row-key="id" border lazy :load="load"
		:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
		<el-table-column prop="ruleFlowCode" label="规则流">
		</el-table-column>
		<el-table-column prop="ruleFlowName" label="规则流名称">
		</el-table-column>
		<el-table-column prop="ruleFlowTempletCode" label="规则模板">
		</el-table-column>
		<el-table-column prop="groupName" label="组织">
		</el-table-column>
		<el-table-column label="状态">
			<template #default="scope">
				<el-tag type="success" v-if="scope.row.status == 1">启用</el-tag>
				<el-tag type="danger" v-else>禁用</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="描述">
			<template #default="scope">
				<el-popover effect="light" trigger="hover" placement="top" width="auto">
					<template #default>
						<div>{{ scope.row.ruleFlowDesc }}</div>
					</template>
					<template #reference>
						<el-tag>详</el-tag>
					</template>
				</el-popover>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="400px">
			<template #default="scope">
				<el-button size="small" type="primary" @click="handleAdd(scope.$index, scope.row)">新增</el-button>
				<el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
				<el-button size="small" type="warning" @click="handleCopy(scope.$index, scope.row)">复制</el-button>
				<el-button size="small" type="danger" @click="handleStatusEdit(scope.$index, scope.row,0)"
					v-if="scope.row.status == 1">禁用</el-button>
				<el-button size="small" type="danger" @click="handleStatusEdit(scope.$index, scope.row,1)" v-else>启用
				</el-button>
				<el-popconfirm title="是否删除?" @confirm="handleDelete(scope.$index, scope.row)">
					<template #reference>
						<el-button size="small" type="danger">删除</el-button>
					</template>
				</el-popconfirm>
				<div style="margin-top: 5px;" v-if="scope.row.ruleFlowTempletCode!=''">
					<el-button size="small" type="primary" @click="handleTempletDetail(scope.$index, scope.row)">查看规则模板
					</el-button>
					<el-button size="small" type="warning" @click="handleTempletEdit(scope.$index, scope.row)">编辑规则模板
					</el-button>
					<el-popconfirm title="是否删除规则模板?" @confirm="handleTempletDel(scope.$index, scope.row)">
						<template #reference>
							<el-button size="small" type="danger">
								删除规则模板
							</el-button>
						</template>
					</el-popconfirm>
				</div>
				<div style="margin-top: 5px;" v-else>
					<el-button size="small" type="primary" @click="handleTempletEdit(scope.$index, scope.row)">新增规则模板
					</el-button>
				</div>
				
				<div style="margin-top: 5px;">
					<el-button v-if="scope.row.ruleFlowTempletCode!=''" size="small" type="primary" @click="showTest(scope.$index, scope.row)">测试</el-button>
					<el-button size="small" type="primary" @click="showScene(scope.$index, scope.row)">应用展示</el-button>
					<el-button size="small" type="primary" @click="showDocument(scope.$index, scope.row)">接口文档</el-button>
				</div>
				
			</template>
		</el-table-column>
	</el-table>
	<div class="demo-pagination-block" style="float: right;margin-right: 20px;">
		<el-pagination v-model:currentPage="pageCurrent" v-model:page-size="pageSize"
			:page-sizes="[10, 20, 40, 60, 80, 100]" :small="small" :disabled="disabled" :background="background"
			layout="total, sizes, prev, pager, next, jumper" :total="pageTotal" @size-change="handleSizeChange"
			@current-change="handleCurrentChange">
		</el-pagination>
	</div>
	<el-dialog v-model="flowEditVisible" :title="flowEditTitle" destroy-on-close width="30%">
		<FlowEdit :ruleFlowData="currentRuleFlowData" :ruleSceneData="ruleScene" @cancelFlowEdit="cancelFlowEdit"
			@successFlowUpdate="successFlowUpdate" @successFlowAdd="successFlowAdd"></FlowEdit>
	</el-dialog>

	<el-dialog v-model="flowTempletEditVisible" :title="currentRuleFlowData.ruleFlowName" destroy-on-close
		:fullscreen="true">
		<FlowTempletEdit @updateVeryRuleFlow="updateVeryRuleFlow" @cancelFlowTempletEdit="cancelFlowTempletEdit"
			:ruleFlowTemplet="ruleFlowTemplet"></FlowTempletEdit>
	</el-dialog>
	
	<el-dialog v-model="flowSceneTempletEditVisible" :title="currentRuleFlowData.ruleFlowName" destroy-on-close
		:fullscreen="true">
		<FlowSceneTempletEdit @updateVeryRuleFlow="updateVeryRuleFlow" @cancelFlowSceneTempletEdit="cancelSceneFlowTempletEdit"
			:ruleFlowTempletData="ruleFlowTemplet"></FlowSceneTempletEdit>
	</el-dialog>

	<el-dialog v-model="flowTempletDetailVisible" :title="currentRuleFlowData.ruleFlowName" destroy-on-close
		:fullscreen="true">
		<FlowTempletEditDetail @cancelFlowTempletDetailEdit="cancelFlowTempletDetailEdit"
			:ruleFlowTemplet="ruleFlowTemplet"></FlowTempletEditDetail>
	</el-dialog>
	
	<el-dialog v-model="flowSceneTempletDetailVisible" :title="currentRuleFlowData.ruleFlowName" destroy-on-close
		:fullscreen="true">
		<FlowSceneTempletEditDetail @cancelFlowSceneTempletDetail="cancelFlowSceneTempletDetail"
			:ruleFlowTempletData="ruleFlowTemplet"></FlowSceneTempletEditDetail>
	</el-dialog>
	
	<el-dialog v-model="veryFlowtempletCopyVisible" destroy-on-close width="500px">
		<FlowCopy :veryFlowAllData="veryFlowAllData" :veryFlowtempletCopyData = "veryFlowtempletCopyData"
		 @cancelFlowCopy="cancelFlowCopy" @successFlowCopy="successFlowCopy"></FlowCopy>
	</el-dialog>
	
	<el-dialog v-model="templetTestVisible" destroy-on-close width="500px">
		<div style="max-height: 500px;overflow-y: scroll;">
			<div v-for="(item,index) in templetTestResult" style="width: 460px;border-bottom: 1px dotted #aaaaaa;height: 40px;padding:5px 0px;">
				<div style=" text-align: center;width: 200px;float: left;">
					<span >{{item.ruleCode}}</span><br>
					<span >{{item.ruleName}}</span>
				</div>
				<div style=" text-align: center;width: 200px;float: left;line-height: 40px;">
					<span style="" v-if="item.success">成功</span>
					<span style="color:red;" v-else>失败</span>
				</div>
			</div>
		</div>
	</el-dialog>
	
	<el-dialog v-model="veryFlowtempletSceneVisible" destroy-on-close width="800px" :title="veryFlowSceneTitle">
		<FlowScene :veryFlowSceneData="veryFlowSceneData" @cancelFlowScene="cancelFlowScene"></FlowScene>
	</el-dialog>
	
	<el-dialog v-model="veryFlowDocumentVisible" destroy-on-close width="800px" :title="veryFlowDocumentTitle">
		<FlowDocument :veryFlowDocumentData="veryFlowDocumentData" :documentRuleFlowCode="documentRuleFlowCode" @cancelFlowDocument="cancelFlowDocument"></FlowDocument>
	</el-dialog>
	
</template>

<script lang="ts" setup>
	import FlowEdit from "./flow/FlowEdit.vue";
	import FlowCopy from "./flow/FlowCopy.vue";
	import FlowTempletEdit from "./flow/FlowTempletEdit.vue";
	import FlowSceneTempletEdit from "./flow/FlowSceneTempletEdit.vue";
	import FlowTempletEditDetail from "./flow/FlowTempletEditDetail.vue";
	import FlowSceneTempletEditDetail from "./flow/FlowSceneTempletEditDetail.vue";
	import FlowScene from "./flow/FlowScene.vue";
	import FlowDocument from "./flow/FlowDocument.vue";
	import {
		ElMessage
	} from 'element-plus'
	import post from "../axios/post.js";
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'

	onMounted(() => {
		pageCurrent.value = 1
		getRuleFlowPage("root",0)
	})

	/* ruleFlowForm  */

	const ruleFlow = ref({
		ruleFlowCode: '',
		ruleName: '',
		groupName: [],
	})

	const addFlow = () => {
		currentRuleFlowData.value = {
			"id": 0,
			"ruleFlowCode": "",
			"ruleFlowName": "",
			"parentRuleFlowCode": "root",
			"groupName": "",
			"ruleFlowDesc": "",
		}
		flowEditTitle.value = '新增规则流'
		flowEditVisible.value = true
		getRuleScene('0')
	}

	const queryFlow = () => {
		pageCurrent.value = 1
		getRuleFlowPage("root",0)
	}

	/* ruleFlowTable */

	const tableData = ref(null)

	const currentRuleFlowData = ref({})

	interface RuleFlow {
		id: number
		ruleFlowCode: string
		ruleFlowName: string
		parentRuleFlowCode: String
		groupName: string
		status: number
		ruleFlowDesc: string
		ruleFlowTempletCode: string
		hasChildren ? : boolean
		children ? : RuleFlow[]
	}

	const ruleFlowForm = ref()

	const resolveFunc = ref()
	const load = (
		row: RuleFlow,
		treeNode: unknown,
		resolve: (ruleFlowCode: RuleFlow[]) => void
	) => {
		const param = {
			"parentRuleFlowCode": row.ruleFlowCode,
			"currentPage": 1,
			"pageSize": pageSize.value,
			"ruleFlowCode": ruleFlowForm.value["model"].ruleFlowCode,
			"ruleFlowName": ruleFlowForm.value["model"].ruleFlowName,
			"groupName": ruleFlowForm.value["model"].groupName,
		}
		post("/api/getVeryRuleFlowPage", param, (data) => {
			if (data.errorCode == 0) {
				if (data.body.records.length > 0) {
					if(data.body.records.length>0){
						for(var index = 0;index<data.body.records.length;index++){
							data.body.records[index].pid = row.id
						}
					}
					if (typeof resolve === "function") {
						resolve(data.body.records)
					} else {
						var ruleFlowData = ruleFlowTable.value.store.states.lazyTreeNodeMap.value[row.id]
						if (ruleFlowData != undefined) {
							ruleFlowData = []
							for (var index in data.body.records) {
								ruleFlowData.push(data.body.records[index])
							}
							ruleFlowTable.value.store.states.lazyTreeNodeMap.value[row.id] = ruleFlowData
						}
					}
				}
			}
		});
	}


	const getRuleFlowPage = (parentRuleFlowCode,id) => {
		const param = {
			"parentRuleFlowCode": parentRuleFlowCode,
			"currentPage": pageCurrent.value,
			"pageSize": pageSize.value,
			"ruleFlowCode": ruleFlowForm.value["model"].ruleFlowCode,
			"ruleFlowName": ruleFlowForm.value["model"].ruleFlowName,
			"groupName": ruleFlowForm.value["model"].groupName,
		}
		post("/api/getVeryRuleFlowPage", param, (data) => {
			if (data.errorCode == 0) {
				pageCurrent.value = data.body.current
				pageSize.value = data.body.size
				pageTotal.value = data.body.total
				if(data.body.records.length>0){
					for(var index = 0;index<data.body.records.length;index++){
						data.body.records[index].pid = id
					}
				}
				tableData.value = data.body.records
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}

	const handleStatusEdit = (index: number, row: RuleFlow, status: number) => {
		const param = {
			"id": row.id,
			"status": status,
		}
		post("/api/updateVeryRuleFlowStatus", param, (data) => {
			if (data.errorCode == 0) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				location.href='/'
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}

	const handleEdit = (index: number, row: RuleFlow) => {
		flowEditTitle.value = row.ruleFlowName
		flowEditVisible.value = true
		if(row.ruleSceneId == 0){
			row.ruleSceneId = '0'
		}
		currentRuleFlowData.value = row
		getRuleScene('0')
	}

	const handleAdd = (index: number, row: RuleFlow) => {
		ruleFlowTableRow.value = row
		currentRuleFlowData.value = {
			"id": 0,
			"ruleFlowCode": "",
			"ruleFlowName": "",
			"parentRuleFlowCode": row.ruleFlowCode,
			"groupName": "",
			"ruleFlowDesc": "",
		}
		flowEditTitle.value = row.ruleFlowName + '-新增规则流'
		flowEditVisible.value = true
	}
	const handleDelete = (index: number, row: RuleFlow) => {
		const param = {
			"id": row.id
		}

		post("/api/delVeryRuleFlow", param, (data) => {
			if (data.errorCode == 0) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				var isDel = false
				for (var index in ruleFlowTable.value.store.states.lazyTreeNodeMap.value) {
					const item = ruleFlowTable.value.store.states.lazyTreeNodeMap.value[index]
					for (var m in item) {
						console.log(item[m].id)
						if (item[m].id == row.id) {
							item.splice(m, 1)
							isDel = true
						}
					}
				}
				if(!isDel){
					getRuleFlowPage("root",0)
				}
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}
	/* ruleFlowPage */
	const pageCurrent = ref(1)
	const pageSize = ref(10)
	const pageTotal = ref(0)
	const small = ref(false)
	const background = ref(false)
	const handleSizeChange = (val: number) => {
		getRuleFlowPage("root",0)
	}
	const handleCurrentChange = (val: number) => {
		getRuleFlowPage("root",0)
	}
	/* ruleFlowEdit */
	const flowEditVisible = ref(false)
	const flowEditTitle = ref('')

	const cancelFlowEdit = () => {
		flowEditVisible.value = false
	}
	const successFlowUpdate = (ruleFlowDataItem) => {
		flowEditVisible.value = false
		getRuleFlowPage("root",0)
		ruleFlowDataItem.id = ruleFlowDataItem.pid
		ruleFlowDataItem.ruleFlowCode = ruleFlowDataItem.parentRuleFlowCode
		load(ruleFlowDataItem, null, null)
	}
	const ruleFlowTable = ref()
	const ruleFlowTableRow = ref()
	const successFlowAdd = () => {
		flowEditVisible.value = false
		if (ruleFlowTableRow.value != undefined) {
			ruleFlowTableRow.value.hasChildren = true
			ruleFlowTable.value.store.loadOrToggle(ruleFlowTableRow.value)
		} else {
			getRuleFlowPage("root",0)
		}
		load(ruleFlowTableRow.value, null, null)
	}
	/* ruleFlowTempletEdit */
	const ruleFlowTemplet = ref()
	const handleTempletEdit = (index: number, row: RuleFlow) => {
		currentRuleFlowData.value = row
		getFlowTempletData(1)
	}
	const flowTempletEditVisible = ref(false)
	const cancelFlowTempletEdit = () => {
		flowTempletEditVisible.value = false
	}
	const flowSceneTempletEditVisible = ref(false)
	const cancelFlowSceneTempletEdit = () => {
		flowSceneTempletEditVisible.value = false
	}
	
	const flowSceneTempletDetailVisible = ref(false)
	const cancelFlowSceneTempletDetail = ()=>{
		flowSceneTempletDetailVisible.value = false
	}
	
	const updateVeryRuleFlow = (ruleFlowTempletCode) => {
		currentRuleFlowData.value.ruleFlowTempletCode = ruleFlowTempletCode
	}
	/* ruleFlowTempletEditDetail */
	const handleTempletDetail = (index: number, row: RuleFlow) => {
		currentRuleFlowData.value = row
		getFlowTempletData(2)
	}
	const flowTempletDetailVisible = ref(false)
	const cancelFlowTempletDetailEdit = () => {
		flowTempletDetailVisible.value = false
	}

	const handleTempletDel = (index: number, row: RuleFlow) => {
		currentRuleFlowData.value = row
		const param = {
			"ruleFlowTempletCode": currentRuleFlowData.value.ruleFlowTempletCode
		}
		post("/api/delVeryRuleFlowAndTemplet", param, (data) => {
			if (data.errorCode == 0) {
				currentRuleFlowData.value.ruleFlowTempletCode = ""
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}

	const getFlowTempletData = (templetType) => {
		ruleFlowTemplet.value = {
			"ruleFlowId": currentRuleFlowData.value.id,
			"ruleSceneId": currentRuleFlowData.value.ruleSceneId,
			"ruleFlowTempletCode": "",
			"ruleFlowTemplet": [],
		}
		const param = {
			"ruleFlowTempletCode": currentRuleFlowData.value.ruleFlowTempletCode
		}
		post("/api/getVeryRuleFlowTempletList", param, (data) => {
			if (data.errorCode == 0) {
				if (templetType == 1) {
					if(currentRuleFlowData.value.ruleSceneId > 0){
						flowSceneTempletEditVisible.value = true
					}else{
						flowTempletEditVisible.value = true
					}
					
				} else {
					if(currentRuleFlowData.value.ruleSceneId > 0){
						flowSceneTempletDetailVisible.value = true
					}else{
						flowTempletDetailVisible.value = true
					}
				}
				if (data.body.length > 0) {
					ruleFlowTemplet.value = {
						"ruleFlowId": currentRuleFlowData.value.id,
						"ruleSceneId": currentRuleFlowData.value.ruleSceneId,
						"ruleFlowTempletCode": data.body[0].ruleFlowTempletCode,
						"ruleFlowTemplet": JSON.parse(data.body[0].ruleFlowTemplet),
					}
				}
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}
	/* veryFlowtempletCopy */
	const veryFlowtempletCopyVisible = ref(false)
	const veryFlowtempletCopyData = ref()
	const veryFlowAllData = ref()
	
	const handleCopy = (index: number, row: RuleFlow) => {
		const param = {}
		post("/api/getVeryRuleFlowList", param, (data) => {
			if (data.errorCode == 0) {
				veryFlowAllData.value = data.body
				veryFlowtempletCopyData.value = {
					"id": row.id,
					"parentRuleFlowCode": row.parentRuleFlowCode,
					"ruleFlowCode": row.ruleFlowCode + "Copy",
					"ruleFlowName": row.ruleFlowName + "副本",
				}
				veryFlowtempletCopyVisible.value = true
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
		
	}
	
	const successFlowCopy = ()=>{
		location.href='/'
	}

	const cancelFlowCopy = () => {
		veryFlowtempletCopyVisible.value = false
	}
	
	const templetTestVisible = ref(false)
	const templetTestResult = ref([])
	const showTest = (index: number, row: RuleFlow)=>{
		const param = {
			"ruleFlowTempletCode": row.ruleFlowTempletCode
		}
		post("/api/testVeryRuleFlow", param, (data) => {
			templetTestResult.value = []
			if (data.errorCode == 0) {
				templetTestVisible.value = true
				const result = data.body;
				for(var ruleCode in result){
					const ruleName = result[ruleCode]
					var resultData = {
						"ruleCode":ruleCode,
						"ruleName":ruleName,
						"success":true
					}
					if(ruleName == ''){
						resultData.success = false
					}
					
					templetTestResult.value.push(resultData)
				}
			}else{
				ElMessage.error(data.errorDesc)
			}
		});
	}
	
	const veryFlowtempletSceneVisible = ref(false)
	const veryFlowSceneData = ref([])
	const veryFlowSceneTitle = ref();
	const showScene=(index: number, row: RuleFlow)=>{
		veryFlowSceneData.value = []
		const param = {
			"ruleFlowCode": row.ruleFlowCode
		}
		veryFlowSceneTitle.value = row.ruleFlowName+"-应用展示"
		post("/api/showSceneInfo", param, (data) => {
			if (data.errorCode == 0) {
				
				if (data.body.length > 0) {
					veryFlowSceneData.value = data.body
				}
				veryFlowtempletSceneVisible.value = true
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}
	const cancelFlowScene=()=>{
		veryFlowtempletSceneVisible.value = false
	}
	
	const veryFlowDocumentVisible = ref(false)
	const veryFlowDocumentData = ref([])
	const veryFlowDocumentTitle = ref()
	const documentRuleFlowCode = ref()
	const showDocument=(index: number, row: RuleFlow)=>{
		veryFlowDocumentData.value = []
		documentRuleFlowCode.value = row.ruleFlowCode;
		const param = {
			"ruleFlowCode": row.ruleFlowCode
		}
		veryFlowDocumentTitle.value = row.ruleFlowName+"-接口文档"
		post("/api/getDocumentInfo", param, (data) => {
			if (data.errorCode == 0) {
				if (data.body.ruleFlowDocument != '') {
					veryFlowDocumentData.value = JSON.parse(data.body.ruleFlowDocument)
				}else{
					veryFlowDocumentData.value = []
				}
				veryFlowDocumentVisible.value = true
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}
	const cancelFlowDocument=()=>{
		veryFlowDocumentVisible.value = false
	}
	
	const ruleScene = ref([])
	const getRuleScene = (pid) => {
		const param = {
			"pid": pid,
		}
		post("/api/getVeryRuleSceneList", param, (data) => {
			if (data.errorCode == 0) {
				ruleScene.value = data.body
			} else {
				ElMessage.error(data.errorDesc)
			}
		});
	}
	
</script>